<template>
	<view class="laout">
       <view class="navbar">
		    <view class="statusBar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="titleBar" :style="{height: tilteBarHeight + 'px'}">
				<view class="title">{{title}}</view>
				<view class="search" v-if= "isShowSearch" @click="searchClick">
					<uni-icons class="icon" type="search" color="#888" size="18"></uni-icons>
					<text class="text">搜索</text>
				</view>
			</view>
	   </view>
	 <view class="fill" :style="{height: getNavBarHeight() +'px'}">
	   </view>
	</view>
</template>

<script setup>
defineProps({
	title: {
		type:String,
		default: "壁纸"
 	},
	isShowSearch: {   
		type: Boolean,
		default:true
	}
})
import { ref } from 'vue';
import { getStatusBarHeight,getTitleBarHeight,getNavBarHeight} from "@/utils/system.js"
let statusBarHeight = ref( getStatusBarHeight())
let tilteBarHeight = ref( getTitleBarHeight() )
function searchClick(){
	uni.navigateTo({
		url:"/pages/search/search"
	})
}

</script>

<style lang="scss" scoped>
.laout {
	.navbar {
		background:
		linear-gradient(to bottom,transparent,#fff 600rpx),
		linear-gradient(to right,#008080,#40E0D0,#FF4500);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		// .statusBar {border: 1px solid red}
		.titleBar {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			.title {
				font-size: 22px;
				font-weight: 700;
				color: #000;
				padding-left: 20rpx;
			}
			.search {
				width: 220rpx;
				height: 50rpx;
				border-radius: 60rpx;
				background: rgba(255, 255, 255, 0.4);
				border: 1px solid #fff;
				margin-left: 30rpx;
				color: #999;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				.icon {
					padding-left: 5rpx;
				}
				.text {
					padding-left: 20rpx;
				} 
			}
		}
	}
}
</style>